<!DOCTYPE HTML>
<html>
<head>
<title>Pushpin - Map</title>
<meta charset="UTF-8">
<script src="http://maps.google.com/maps/api/js?key=%s"></script>
<script type="text/javascript">

var map;
%s

// initializes the map interface
function showMap() {
    var lat = %s;
    var lon = %s;
    var rad = %s;
    var coords = new google.maps.LatLng(lat,lon);
    var mapOptions = {
        zoom: 15,
        center: coords,
        disableDefaultUI: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var populationOptions = {
        strokeColor: "gray",
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: "gray",
        fillOpacity: 0.1,
        map: map,
        center: coords,
        radius: rad * 1000
    };
    var cityCircle = new google.maps.Circle(populationOptions);

    function add_marker(opts, place, source) {
        var marker = new google.maps.Marker(opts);
        var infowindow = new google.maps.InfoWindow({
            autoScroll: false,
            content: place.details
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
        if (typeof source !== 'undefined') {
            window[source].push(marker);
        }
    }

    add_marker({position:coords,title:"Epicenter",icon:"http://maps.google.com/mapfiles/ms/icons/green-dot.png",map:map},{details:"Epicenter:<br />" + lat + "," + lon + "<br />Radius: " + rad + "km"});
%s
}

// sets the map on all markers in the array
function setAllMap(map, source) {
    for (var i = 0; i < window[source].length; i++) {
        window[source][i].setMap(map);
    }
}

// removes the markers from the map, but keeps them in the array
function clearMarkers(source) {
    setAllMap(null, source);
}

// shows any markers currently in the array
function showMarkers(source) {
    setAllMap(map, source);
}

function toggleMarkers(source) {
    if(document.getElementById(source).checked) {
        showMarkers(source);
    } else {
        clearMarkers(source);
    }
}

google.maps.event.addDomListener(window, 'load', showMap);

</script>
<style type="text/css">
html {
    height: 100%%
}
body {
    font-family: Verdana, Geneva, sans-serif;
    height: 100%%;
    margin: 0;
    padding: 0
}
td {
    padding: 5px
}
.map {
    width: 100%%;
    height: 100%%;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.prof_cell {
    text-align: center;
    width: 57px; /*.prof_img[50px width + (1px border x 2 sides) + 5px margin]*/
}
.data_cell {
    width: 400px;
}
.prof_img {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    margin: 0 0 0 5px;
}
.time {
    font-size: .75em;
}
.rounded {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.shaded {
    border: 1px solid orange;
    -webkit-box-shadow: 3px 3px 3px gray;
    -moz-box-shadow: 3px 3px 3px gray;
    box-shadow: 3px 3px 3px gray;
}
.nav {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
    padding: 10px;
    color: white;
    border: 2px solid orange;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa opacity */
    background: rgba(0, 0, 0, 0.6);
}
input[type=checkbox] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
</style>
</head>
<body>
    <div id="nav" class="nav rounded shaded">
        <div id="filter">
%s
        </div>
        <div id="summary"></div>
    </div>
    <div class="map" id="map"></div>
</body>
</html>